<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      section {
        width: 600px;
        height: 500px;
        border: 1px solid #000;
        margin: 50px auto;

        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
        align-content: space-evenly;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        color: #fff;
        /* 圆角属性 */
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <section>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </section>
  </body>
</html>

<!-- 
  弹性盒
    弹性盒是css3新增的一种布局的方式
    传统的布局的方式，需要依赖 display + float + position 等方式来实现。是相对不方便的

    
  flex布局
  给父元素添加弹性盒，来控制里面的子元素的排列方式的

  Flex容器：采用 Flex 布局的元素的最近的父元素；
  Flex项目：采用 Flex 布局的元素的父元素的子元素；
  容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。



  给父元素加的属性
    1. 将父元素变成弹性盒元素
      display: flex/inline-flex;
      变成弹性盒以后，会有一个默认的主轴是从左往右的，交叉轴就是和主轴垂直的那个轴

    
    2. 主轴方向
      flex-direction
        row: 主轴从左往右，默认值
        column: 主轴从上往下
        row-reverse: 主轴从右往左
        column-reverse: 主轴从下往上


    3. 主轴的排列方式
      justify-content
        start: 子元素在主轴的开始位置排列,默认值
        center: 子元素在主轴居中排列
        end: 子元素在主轴的结束位置排列
        space-around: 平分主轴的剩余空间，两边的空间是中间的一半
        space-between: 平分主轴的剩余空间，两边没有空间
        space-evenly: 平分主轴的剩余空间，两边的空间和中间一样


    4. 交叉轴(侧轴, 跟主轴垂直的那个轴)的排列方式
      align-items
        start: 子元素在交叉轴的开始位置排列
        center: 子元素在交叉轴的居中排列
        end: 子元素在交叉轴的结束位置排列
        baseline: 基线对齐
        stretch: 拉伸, 如果主轴是row，那么元素不写高度的话就和父元素的高度一样,默认值



    5. 是否换行
      flex-wrap
        nowrap: 不换行（挤压），默认值
        wrap: 换行
        wrap-reverse: 换行，反转了交叉轴的方向


        
    6. 行与行的排列方式
      align-content
        start: 在交叉轴的开始位置排列
        center: 在交叉轴的居中排列
        end: 在交叉轴的结束位置排列
        space-around: 平分交叉轴的剩余空间，两边的空间是中间的一半
        space-between: 平分交叉轴的剩余空间，两边没有空间
        space-evenly: 平分交叉轴的剩余空间，两边的空间和中间一样


    

    
 -->
